<!DOCTYPE HTML>
<html>
	<head>
		<title>nativeDroid II - jQueryMobile Template</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
		<link rel="stylesheet" href="/vendor/waves/waves.min.css" />
		<link rel="stylesheet" href="/css/nativedroid2.css" />

				<style>
					/* Prevent FOUC */
					body { opacity: 0; }
				</style>

	</head>
	<body>

		<div data-role="page">

			<nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>


			<div data-role="header" data-position="fixed">
				<a href="#leftpanel" class="ui-btn ui-btn-left"><i class="zmdi zmdi-menu"></i></a>
				<h1>Cards</h1>
			</div>

			<div role="main" class="ui-content" data-inset="false">

				<!-- Simple Card !-->

				<div class="nd2-card">

					<div class="card-media">
						<img src="/img/examples/card_bg_1.jpg">
					</div>

					<div class="card-supporting-text">
						Cards are a convenient means of displaying content composed of different elements. They're also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.
					</div>

				</div>


				<!-- Simple Card with Title !-->

				<div class="nd2-card">

					<div class="card-title has-avatar">
						<img class="card-avatar" src="//lorempixel.com/200/200/people/9/">
						<h3 class="card-primary-title">Power of Lavender</h3>
						<h5 class="card-subtitle">Taken in Provence, France</h5>
					</div>

					<div class="card-media">
						<img src="/img/examples/card_bg_2.jpg">
					</div>

					<div class="card-supporting-text has-action">
						<strong>Lavandula</strong> (common name lavender) is a genus of 39 known species of flowering plants in the mint family, Lamiaceae. It is native to the Old World and is found from Cape Verde and the Canary Islands, southern Europe across to northern and eastern Africa, the Mediterranean, southwest Asia to southeast India.
					</div>

					<div class="card-action">
						<div class="row between-xs">
							<div class="col-xs-4">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mic'></i></a>
									<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-videocam'></i></a>
								</div>
							</div>
							<div class="col-xs-8 align-right">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline">Action</a>
								</div>
							</div>
						</div>
					</div>

				</div>



				<!-- Simple Card No Media !-->

				<div class="nd2-card">

					<div class="card-title has-supporting-text">
						<h3 class="card-primary-title">Biomaterial</h3>
						<h5 class="card-subtitle">From Wikipedia, the free encyclopedia</h5>
					</div>

					<div class="card-supporting-text has-action has-title">
						A biomaterial is any matter, surface, or construct that interacts with biological systems. As a science, biomaterials is about fifty years old. The study of biomaterials is called biomaterials science. It has experienced steady and strong growth over its history, with many companies investing large amounts of money into the development of new products.
					</div>

					<div class="card-action">
						<div class="row between-xs">
							<div class="col-xs-12">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline">Applause</a>
									<a href="#" class="ui-btn ui-btn-inline">Boooh</a>
								</div>
							</div>
						</div>
					</div>

				</div>


				<!-- Media Card with Actions !-->

				<div class="nd2-card">

					<div class="card-media">
						<img src="/img/examples/card_bg_3.jpg">
					</div>

					<div class="card-action">
						<div class="row between-xs">
							<div class="col-xs-12 align-right">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-favorite'></i></a>
									<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-bookmark'></i></a>
									<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mail-reply zmd-flip-horizontal'></i></a>
								</div>
							</div>
						</div>
					</div>

				</div>


				<!-- Media Overlay with Background !-->

				<div class="nd2-card">


					<div class="card-media">
						<img src="/img/examples/card_bg_2.jpg">

						<div class='card-media-overlay with-background'>

							<div class="card-title has-supporting-text">
								<h3 class="card-primary-title">Power of Lavender</h3>
								<h5 class="card-subtitle">Taken in Provence, France</h5>
							</div>

							<div class="card-action">
								<div class="row between-xs">
									<div class="col-xs-12">
										<div class="box">
											<a href="#" class="ui-btn ui-btn-inline">Action 1</a>
											<a href="#" class="ui-btn ui-btn-inline">Action 2</a>
										</div>
									</div>
								</div>
							</div>

						</div>

					</div>


				</div>

				<div class="row">

					<div class="col-xs-6">
						<div class="box">


							<!-- Media Overlay no Background !-->

							<div class="nd2-card">


								<div class="card-media">
									<img src="/img/examples/card_thumb_2.jpg">

									<div class='card-media-overlay'>

										<div class="card-title has-supporting-text">
											<h3 class="card-primary-title">Crossing Cranes</h3>
										</div>

									</div>

								</div>


								<div class="card-action">
									<div class="row between-xs">
										<div class="col-xs-12 align-right">
											<div class="box">
												<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-favorite'></i></a>
												<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-bookmark'></i></a>
												<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mail-reply zmd-flip-horizontal'></i></a>
											</div>
										</div>
									</div>
								</div>

							</div>


						</div>
					</div>

					<div class="col-xs-6">
						<div class="box">

							<!-- Media Overlay no Background !-->

							<div class="nd2-card">


								<div class="card-media">
									<img src="/img/examples/card_thumb_1.jpg">

									<div class='card-media-overlay'>

										<div class="card-title has-supporting-text">
											<h3 class="card-primary-title">The Bridge</h3>
										</div>

									</div>

								</div>


								<div class="card-action">
									<div class="row between-xs">
										<div class="col-xs-12 align-right">
											<div class="box">
												<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-favorite'></i></a>
												<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-bookmark'></i></a>
												<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mail-reply zmd-flip-horizontal'></i></a>
											</div>
										</div>
									</div>
								</div>

							</div>


						</div>
					</div>

				</div>


				<!-- Simple Card Media Right - small - no action !-->

				<div class="nd2-card card-media-right card-media-small">


					<div class="card-media">
						<img src="/img/examples/card_thumb_1.jpg">
					</div>

					<div class="card-title">
						<h3 class="card-primary-title">Bridge</h3>
						<h5 class="card-subtitle">A bridge is a structure built to span physical obstacles such as a body of water, valley, or road, for the purpose of providing passage over the obstacle.</h5>
					</div>

				</div>


				<!-- Simple Card Media Right - medium - no action !-->

				<div class="nd2-card card-media-right card-media-medium">


					<div class="card-media">
						<img src="/img/examples/card_thumb_3.jpg">
					</div>

					<div class="card-title">
						<h3 class="card-primary-title">Building Edge</h3>
						<h5 class="card-subtitle">Black and White</h5>
					</div>


				</div>



				<!-- Simple Card Media Right - large - no action !-->

				<div class="nd2-card card-media-right card-media-large">


					<div class="card-media">
						<img src="/img/examples/card_thumb_2.jpg">
					</div>

					<div class="card-title">
						<h3 class="card-primary-title">Crossing Cranes</h3>
						<h5 class="card-subtitle">And I'm a Subline</h5>
					</div>


				</div>



				<!-- Simple Card Media Right - small !-->

				<div class="nd2-card card-media-right card-media-small">


					<div class="card-media">
						<img src="/img/examples/card_thumb_1.jpg">
					</div>

					<div class="card-title has-supporting-text">
						<h3 class="card-primary-title">Bridge</h3>
						<h5 class="card-subtitle">A bridge is a structure built to span physical obstacles such as a body of water, valley, or road, for the purpose of providing passage over the obstacle.</h5>
					</div>

					<div class="card-action">
						<div class="row between-xs">
							<div class="col-xs-12">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline">Action 1</a>
									<a href="#" class="ui-btn ui-btn-inline">Action 2</a>
								</div>
							</div>
						</div>
					</div>

				</div>


				<!-- Simple Card Media Right - medium !-->

				<div class="nd2-card card-media-right card-media-medium">


					<div class="card-media">
						<img src="/img/examples/card_thumb_3.jpg">
					</div>

					<div class="card-title has-supporting-text">
						<h3 class="card-primary-title">Building Edge</h3>
						<h5 class="card-subtitle">Black and White</h5>
					</div>

					<div class="card-action">
						<div class="row between-xs">
							<div class="col-xs-12">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline">Action 1</a>
									<a href="#" class="ui-btn ui-btn-inline">Action 2</a>
								</div>
							</div>
						</div>
					</div>

				</div>



				<!-- Simple Card Media Right - large !-->

				<div class="nd2-card card-media-right card-media-large">


					<div class="card-media">
						<img src="/img/examples/card_thumb_2.jpg">
					</div>

					<div class="card-title has-supporting-text">
						<h3 class="card-primary-title">Crossing Cranes</h3>
						<h5 class="card-subtitle">And I'm a Subline</h5>
					</div>

					<div class="card-supporting-text has-action has-title">
						A biomaterial is any matter, surface, or construct that interacts with biological systems. As a science, biomaterials is about fifty years old. The study of biomaterials is called biomaterials science. It has experienced steady and strong growth over its history, with many companies investing large amounts of money into the development of new products.
					</div>

					<div class="card-action">
						<div class="row between-xs">
							<div class="col-xs-12">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline">Action 1</a>
									<a href="#" class="ui-btn ui-btn-inline">Action 2</a>
								</div>
							</div>
						</div>
					</div>

				</div>


				<!-- Simple Card Media Right - small - with text !-->

				<div class="nd2-card card-media-right card-media-small">


					<div class="card-media">
						<img src="/img/examples/card_thumb_1.jpg">
					</div>

					<div class="card-title has-supporting-text">
						<h3 class="card-primary-title">Bridge</h3>
						<h5 class="card-subtitle">A bridge is a structure built to span physical obstacles such as a body of water, valley, or road, for the purpose of providing passage over the obstacle.</h5>
					</div>

					<div class="card-supporting-text has-action has-title">
						A biomaterial is any matter, surface, or construct that interacts with biological systems. As a science, biomaterials is about fifty years old. The study of biomaterials is called biomaterials science. It has experienced steady and strong growth over its history, with many companies investing large amounts of money into the development of new products.
					</div>

					<div class="card-action">
						<div class="row between-xs">
							<div class="col-xs-12">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline">Action 1</a>
									<a href="#" class="ui-btn ui-btn-inline">Action 2</a>
								</div>
							</div>
						</div>
					</div>

				</div>


				<!-- Simple Card Media Right - medium - with text !-->

				<div class="nd2-card card-media-right card-media-medium">

					<div class="card-media">
						<img src="/img/examples/card_thumb_3.jpg">
					</div>

					<div class="card-title has-supporting-text">
						<h3 class="card-primary-title">Building Edge</h3>
						<h5 class="card-subtitle">Black and White</h5>
					</div>


					<div class="card-supporting-text has-action has-title">
						A biomaterial is any matter, surface, or construct that interacts with biological systems. As a science, biomaterials is about fifty years old. The study of biomaterials is called biomaterials science. It has experienced steady and strong growth over its history, with many companies investing large amounts of money into the development of new products.
					</div>

					<div class="card-action">
						<div class="row between-xs">
							<div class="col-xs-12">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline">Action 1</a>
									<a href="#" class="ui-btn ui-btn-inline">Action 2</a>
								</div>
							</div>
						</div>
					</div>

				</div>



				<!-- Simple Card Media Right - large - with text !-->

				<div class="nd2-card card-media-right card-media-large">


					<div class="card-media">
						<img src="/img/examples/card_thumb_2.jpg">
					</div>

					<div class="card-title has-supporting-text">
						<h3 class="card-primary-title">Crossing Cranes</h3>
						<h5 class="card-subtitle">And I'm a Subline</h5>
					</div>

					<div class="card-action">
						<div class="row between-xs">
							<div class="col-xs-12">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline">Action 1</a>
									<a href="#" class="ui-btn ui-btn-inline">Action 2</a>
								</div>
							</div>
						</div>
					</div>

				</div>



				<!-- Simple Card Media Left !-->

				<div class="nd2-card card-media-left">


					<div class="card-media">
						<img src="/img/examples/card_thumb_1.jpg">
					</div>

					<div class="card-action">
						<div class="row between-xs">
							<div class="col-xs-12">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-favorite'></i></a>
									<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-bookmark'></i></a>
									<a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mail-reply zmd-flip-horizontal'></i></a>
								</div>
							</div>
						</div>
					</div>

				</div>



				<!-- Simple Card :::: !-->

				<div class="nd2-card">

					<div class="card-title has-supporting-text">
						<h3 class="card-primary-title">Corn Field in Sunset</h3>
						<h5 class="card-subtitle">Taken in Provence, France</h5>
					</div>

					<div class="card-media">
						<img src="/img/examples/card_bg_1.jpg">
					</div>

					<div class="card-supporting-text has-action">
						Cards are a convenient means of displaying content composed of different elements. They're also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.
					</div>

					<div class="card-action">
						<div class="row between-xs">
							<div class="col-xs-4">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline"><i class='zmdi zmdi-cut'></i></a>
								</div>
							</div>
							<div class="col-xs-8 align-right">
								<div class="box">
									<a href="#" class="ui-btn ui-btn-inline">Action</a>
									<a href="#" class="ui-btn ui-btn-inline">Action</a>
								</div>
							</div>
						</div>
					</div>

				</div>

			</div>

		</div>

		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
		<script src="/vendor/waves/waves.min.js"></script>
		<script src="/js/nativedroid2.js"></script>
		<script src="/nd2settings.js"></script>

	</body>
</html>
